<template>
	<view :class="bagcolor == 1 ? 'content-header' : 'active'" style="overflow-y: scroll">
		<view class="title-name">请选择收货地址</view>
		<view class="selected-address">
			<radio-group v-model="current" @change="radioChange">
				<view class="selected-item" v-for="(item, index) in addressList" :key="index" @click="selectedAddress(item)">
					<radio class="checkbox" :checked="current === item.index" :value="item.index"></radio>
					<text style="margin-right: 26rpx; color:black"  >{{ item.name }}</text>
					<text>{{ item.phone }}</text>
					<view class="item-address">
						{{ item.provinceName + item.cityName + item.districtName + item.addressDetail }}
					</view>
					<view class="default_item">
						<view class="operate">
							<view style="position: absolute; right: 80rpx; top: 0; color: red" @click.stop="deletFun(item.id)">删除</view>
							<view style="position: absolute; right: 0; top: 0; color: #1677ff" @click.stop="topage(item.id,item)">编辑</view>
						</view>
					</view>
				</view>
			</radio-group>
		</view>
		<view class="addAdress">
			<u-icon name="plus-circle" size="20"></u-icon>
			<text style="margin-left: 16rpx" @click="topage()">新增地址</text>
		</view>
		<view class="defaultClass" @click="defaultManger">默认地址授权管理</view>
		<view class="bottom-btn">
			<button style="background-color: #1677ff; color: #fff" @click="addressConfirm()" @click1="sendParent">确认</button>
			<button @click="close" style="background-color: #cccccc;">取消</button>
		</view>
	</view>
</template>

<script>
import address from '@/api/address.js';
export default {
	data() {
		return {
			show: true,
			addressList: [],
			current: 1 //默认选中的值
		};
	},

	mounted() {
		console.log('this.addressList', this.addressList);

		this.getAddressList();
	},
	methods: {
		defaultManger() {
			uni.navigateTo({
				url: '/subPages/mine/address'
			});
		},
		addressConfirm() {
			//发起请求修改默认地址
			console.log(this.addressList[this.current]);
			this.addressList[this.current].isDefault = 1;
			address.updateAddress(this.addressList[this.current]).then((res) => {
				if (res.code == 200) uni.showToast({ title: '修改成功', icon: 'none' });
			});

			this.$emit('popuoSubmit', this.addressList[this.current]);
		},
		close() {
			this.$emit('closePopup', '传递参数');
		},
		sendParent() {
			this.$emit('my-event', '这是传递的参数');
		},

		getAddressList() {
			address
				.addressList()
				.then((res) => {
					if (res.code == 200) {
						this.addressList = res.rows;
						this.addressList.forEach((item, index) => {
							if (item.isDefault == 1) {
								this.current = index;
							}
							item['index'] = index;
						});
						console.log(this.addressList);
					}
				})
				.catch((erro) => {
					console.log('error');
				});
		},
		// 选择地址
		selectedAddress(item) {
			if (this.source != 'order') return;
			uni.setStorageSync('selectedAddress', item);
			uni.navigateBack();
		},
		handleTriggerSelect(item) {
			if (item.isDefault == 0) {
				uni.showToast({
					title: '该地址已是默认地址',
					icon: 'none'
				});
				return;
			}
			let params = {
				...item,
				isDefault: 0
			};
			address.updateAddress(params).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					this.getAddressList();
				}
			});
		},
		deletFun(ids) {
			address.deleteAddressIds(ids).then((res) => {
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					this.getAddressList();
				}
			});
		},
		topage(id,item) {
			if (id) {
				uni.navigateTo({
					url: `/subPages/mine/addAdress?id=${id}&data=${encodeURIComponent(JSON.stringify(item))}`   
				});
			} else {
				uni.navigateTo({
					url: '/subPages/mine/addAdress'
				});
			}
		},
		radioChange(event) {
			console.log(event);
			this.current = event.detail.value;
		}
	},
	onShow() {
		this.getAddressList();
	},
	props: ['bagcolor'],

	// mounted() {
	// console.log(this.bagcolor);
	// },
	onLoad() {
		this.getAddressList();
	},

	props: ['bagcolor'],

	mounted() {
		this.getAddressList();
	}
};
</script>

<style lang="scss" scoped>
.bottom-btn {
	display: flex;
	width: 100%;

	justify-content: space-around;
	margin-top: 40rpx;
}
.bottom-btn button {
	width: 30%;
	border-radius: 50rpx;
}
.content-header {
	box-sizing: border-box;
	padding-left: 32rpx;
	padding-right: 32rpx;
}

.active {
	background-color: #f8f9ff;
	border-radius: 25rpx;
	box-sizing: border-box;
	padding: 30rpx;
}

.title-name {
	font-size: 32rpx;
	color: #333333;
	font-weight: 600;
	margin: 32rpx 0;
	margin-left: 16rpx;
}

.selected-address {
	width: 100%;
	min-height: 300rpx;
	max-height: 500rpx;
	overflow-y: auto;
}

.item-address {
	width: 398rpx;
	margin-left: 62rpx;
	color: #777777;
}

.selected-item {
	width: 100%;
	margin: 38rpx 0;
	font-size: 30rpx;
	position: relative;
}

.checkbox {
	margin-right: 14rpx;
	margin-top: 16rpx;
}

.addAdress {
	color: #777777;
	display: flex;
}

.default_item {
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.default {
		display: flex;
		// align-items: center;

		color: #ff4254;
	}

	.operate {
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.edit {
			color: #ff4254;
		}
	}
}

.selected-icon {
	margin: 2rpx;
	color: #fff !important;
}
.defaultClass {
	margin-top: 14rpx;
	margin-bottom: 20rpx;
	width: 192rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #1677ff;
	text-align: left;
}
</style>
